<template>
    <div class="app-container">
        <div class="course-selection">
          <div v-if="!showCourseSelection">
            <el-input v-model="idCard" placeholder="请输入身份证号码"></el-input>
            <el-button type="primary" @click="checkStudent" style="margin-top: 20px;">确认</el-button>
          </div>           

            <div v-if="showCourseSelection">
            <h2>欢迎选课！</h2>
            <el-select v-model="courseId" placeholder="请选择课程">
                <el-option v-for="course in courses" :key="course.id" :label="course.name" :value="course.id"></el-option>
            </el-select>
            <el-button type="primary" @click="submitCourse">提交选课</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import students from '@/api/cms/students'
import courses from '@/api/cms/courses';
import courseSelection from '@/api//cms/courseSelection'
export default {
    data() {
    return {
      idCard: '',
      showCourseSelection: false,
      courseId: '',
      studentId:'',
      courses: [
      ]
    };
  },
  created() {
    courses.getElective().then((res) => {
      this.courses = res.data.content
    }).catch((err) => {
      console.log(err)
      this.$message.error('页面出错了');
    });
  },
  methods: {
    checkStudent() {
        students.getStudentsId(this.idCard).then((res) => {
            if (res.data.studentId) {
              this.studentId = res.data.studentId;
            this.showCourseSelection = true;
          } else {
            this.$message.error('未找到匹配的学生记录');
          }
        }).catch((err) => {
            this.$message.error('界面异常');
        });
    },
    // 添加选课
    submitCourse() {
      let data = {
        courseId: this.courseId,
        studentId: this.studentId
      }
      courseSelection.addInfo(data).then((res) => {
          this.$message.success(res.message);
          this.courseId= '';
          this.studentId ='';
          this.showCourseSelection= false;       
      }).catch((err) => {
          this.$message.error(err.message);
      });
    }
  },
}
</script>

<style>

</style>